<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<template v-if="i === 0">
			<mescroll-body ref="mescrollRef" top="88" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			 :up="upOption">
				<view class="tis">
					<view class="s-header s-colour">总收益金额：￥{{totalAmount}}</view>
				</view>
				<view class="row" v-for="(row,index) in dataList" :key="index">
					<view class="s-title">
						{{row.date}}
					</view>
					<view class="item-Detail" v-for="(rowItem,childIndex) in row.detail_list" :key="childIndex">
						<view>{{rowItem | incomeDescFormat}}</view>
						<view class="text">+{{rowItem.amount}}</view>
					</view>
				</view>
			</mescroll-body>
		</template>
		<template v-if="i === 1">
			<mescroll-body ref="mescrollRef" top="88" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			 :up="upOption">
				<view class="tis">
					<view class="s-header">总支出：￥{{totalAmount}}</view>
				</view>

				<view class="secondary">
					<view class="row" v-for="(row,index) in dataList" :key="index">
						<view class="s-header">
							<view>{{row | incomeDescFormat}}</view>
							<view class="amount">-{{row.amount}}</view>
						</view>
						<view class="operating" :class="{failure:row.status==3}">
							<view>{{row.date}}</view>
							<view v-if="row.status == 2 " class="txt_processing">正在处理</view>
							<view v-if="row.status == 1 ">提现成功</view>
							<view v-if="row.status == 3 " class="txt_failure">提现失败</view>
							<!-- <view v-if="row.status == 2 "></view> -->
						</view>
						<view v-if="row.status == 3 " class="customer_service">
							<view>联系客服</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</template>
	</view>
</template>
<script>
	import Api from '@/common/api';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";


	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量,默认10
						currentTotal: 0, //当前数据累加量
					},
					noMoreSize: 10, //配置列表的总数量要大于等于 noMoreSize 条菜显示 textNoMore 的提示
					textNoMore: '-- 我是有底线的 --',
					empty: {
						tip: '暂未有任何现金赚取记录',
						icon: '/static/empty/empty-data.png'
					}
				},
				dataList: [],
				totalAmount: 0,
				preEveryTimeRequestNum: 0, //上次单次请求页的数据量（不是累加量）
			}
		},
		computed: {

		},
		filters: {
			incomeDescFormat(val) {
				let desc, user = val.type == 0 ? '用户' : val.type == 1 ? '会员' : '代理商';
				switch (val.detail_source) {
					case 1:
						desc = `${user} ${val.name} 代理分成`
						break;
					case 2:
						desc = `领取红包`
						break;
					case 3:
						desc = `${user} ${val.name} 订单分成`
						break;
					case 5:
						desc = `发红包`
						break;
					case 6:
						desc = `微信提现`
						break;
					case 7:
						desc = `购买商品`
						break;
				}

				return desc;
			}
		},
		methods: {
			/**
			 * @param {Object} page
			 * @description 下来刷新回调
			 */
			upCallback(page) {
				let pageNum = page.num; //页码。默认从1开始
				this.loadData(pageNum);
			},
			async loadData(pageNum) {
				let method = 'post',
					params = {
						page: pageNum,
						type: this.i == 0 ? 'in' : 'out'
					},
					data = await Api.apiCall(method, Api.agent.get_expenditure, params);

				if (data) {
					console.log(`pageNum: ${pageNum}`)
					if (pageNum == 1) {
						this.upOption.page.currentTotal = 0;
						this.preEveryTimeRequestNum = 0;
						this.dataList = []; //如果是第一页需手动置空列表
					} else {
						this.preEveryTimeRequestNum = data.detail.length;
					}
					if (this.i == 0 && data.detail.length > 0) {
						data.detail.forEach(e1 => {
							if (this.dataList.length > 0) {

								let dateIndex = this.dataList.findIndex(e2 => {
									return e2.date == e1.created_day;
								});
								if (dateIndex != -1) {
									this.dataList[dateIndex].detail_list.push({
										name: e1.name,
										amount: e1.money,
										detail_source: e1.detail_source,
										type: e1.type
									})
								} else {
									this.dataList.push({
										date: e1.created_day,
										detail_list: [{
											name: e1.name,
											amount: e1.money,
											detail_source: e1.detail_source,
											type: e1.type
										}]
									})
								}
							} else {
								this.dataList.push({
									date: e1.created_day,
									detail_list: [{
										name: e1.name,
										amount: e1.money,
										detail_source: e1.detail_source,
										type: e1.type
									}]
								})
							}
						})
					} else if (this.i == 1 && data.detail.length > 0) {
						data.detail.forEach(e => {
							this.dataList.push({
								name: e.name,
								date: e.created_at,
								amount: e.money,
								status: e.status,
								detail_source: e.detail_source,
								type: e.type
							})
						})
					}
					
					this.upOption.page.currentTotal += data.detail.length;
					this.totalAmount = data.total_amount;
					let hasNext = this.preEveryTimeRequestNum <= data.detail.length,
						curListLen = data.detail.length;
					this.mescroll.endSuccess(curListLen, hasNext);
				} else {
					//  请求失败,隐藏加载状态
					console.log(`error`)
					this.mescroll.endErr()
				}

			}
		}
	}
</script>

<style lang="scss">
	.tis {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 28upx;

		.s-header {
			width: 100%;
			height: 68upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #E1E4E5;
		}

		.s-colour {
			background-color: #F8E2A2;
		}

	}

	.row {
		width: 100%;
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;
		position: relative;

		&::after {
			content: '';
			width: calc(100% - 60upx);
			height: 1upx;
			background-color: #EFF2F4;
			position: absolute;
			bottom: 0;
			left: 30upx;
		}


		.s-title {
			width: 100%;
			height: 88upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #ABADAD;
			font-size: 28upx;
			border-bottom: 1upx solid #EFF2F4;
		}

		.item-Detail {
			width: 100%;
			height: 98upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #EFF2F4;

			view {
				// width: 100%;
				// height: 98upx;
				// border: 1upx solid red;
				// display: flex;
				// align-items: center;
				color: #232323;
				font-size: 32upx;
			}

			.text {
				font-size: 36upx;
			}
		}

		.s-header {
			width: 100%;
			height: 70upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			color: #232323;
			font-size: 24upx;

			// border: 1upx solid red;
			.amount {
				font-weight: 600;
				font-size: 36upx;

			}
		}
	}

	.secondary {
		.row {
			.s-header {
				width: 100%;
				height: 84upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #232323;
				font-size: $font-sm + 8upx;

				// border: 1upx solid red;
				.amount {
					font-weight: 600;
					font-size: $font-sm + 12upx;

				}
			}

			.operating {
				width: 100%;
				height: 54upx;
				padding-bottom: 30upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				// align-items: center;
				color: #ABADAD;
				font-size: $font-sm;

				// border: 1upx solid red;
				.txt_processing {
					color: #46B35C;
				}

				.txt_failure {
					color: #E52632;
				}
			}

			.failure {
				width: 100%;
				height: 42upx;
				padding-bottom: 18upx;
			}

			.customer_service {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				padding-bottom: 24upx;

				view {
					width: 180upx;
					height: 68upx;
					border-radius: 34upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1upx solid #757677;
					color: #232323;
					font-size: $font-sm + 4upx;
				}
			}
		}

	}
</style>
